#text-input-container {
  background-color: white;
  width: 80%;
  display: flex;
  border: 1px solid #0000001a;
  border-radius: 5px;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 12px;
  overflow-y: auto;
  max-height: 200px;
  position: relative;
}

.text-input-container-start-adjustment {
  margin-inline-start: 1.5em;
}

.text-input-container-end-adjustment {
  margin-inline-end: 1.5em;
}

.text-input-container-start-small-adjustment {
  margin-inline-start: 1.1em;
}

.text-input-container-start-small-adjustment > .outside-start {
  inset-inline-end: calc(14px - 0.55em);
}

.text-input-container-end-small-adjustment {
  margin-inline-end: 1.1em;
}

.text-input-container-end-small-adjustment > .outside-end {
  inset-inline-start: calc(14px - 0.55em);
}

#text-input {
  text-align: start;
  outline: none;
  word-wrap: break-word;
  /* test in Safari using following text - seduijasiudj iasojd iasdjas oijdioa joisaj doij */
  line-break: auto;
  /* Use these properties to inline all of the text  */
  /* white-space: nowrap;
  overflow: hidden; */
}

/* the motivation behind using the class is to allow the adjustments to change it */
/* need to use width to allow the mouse to select element when there is no text and not to have horizontal overflow */
.text-input-styling {
  padding: 0.4em 0.5em 0.4em 0.5em;
  /* the combination of these two properties is used to automatically set the text width to the padding */
  overflow: overlay;
  width: 100%;
}

.text-input-inner-start-adjustment {
  padding-inline-start: 2.2em;
}

.text-input-inner-end-adjustment {
  padding-inline-end: 2em;
}

.text-input-disabled {
  pointer-events: none;
  user-select: none;
}

[contenteditable]:empty:before {
  /* Has to be an attribute to be accessed by contenteditable pseusod element and pseudo classes */
  content: attr(deep-chat-placeholder-text);
  pointer-events: none;
}

[contenteditable][textcolor]:empty:before {
  color: grey;
}
